/**
 * @modal: 换商品
 */
import { Button, Row, Col, Space } from 'antd';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import { CommonTable } from '@/pages/OrderModule/common/components/CommonTable';
import Typography from '@/pages/OrderModule/common/components/Typography';
import IconFont from '@/components/IconFont';
import GoodsSearch from './GoodsSearch';
import { useGoodsColumns } from './goodsColumns';
import Style from './index.module.less';
import mock from './mock';

function ExchageGoodsModal({ onCancel }) {
  const { goodsColumns } = useGoodsColumns();

  function handleOk() {}

  return (
    <>
      <CommonModal title={{ title: '换商品' }} open={true} width="1378px" onOk={handleOk} onCancel={onCancel}>
        <Row gutter={[10, 10]}>
          <Col span={12}>
            <Typography as="s1">买家留言：XXXXX</Typography>
          </Col>
          <Col span={12}>
            <Typography as="s1">
              卖家备注：
              <IconFont type="iconqizhilan" />
              XXXXXX文字
            </Typography>
          </Col>
          <Col span={12}>
            <Typography as="s1">商品编码：文字文字文字</Typography>
          </Col>
          <Col span={12}>
            <Typography as="s1">颜色规格：XXXXX</Typography>
          </Col>
          <Col span={12}>
            <Typography as="s1">商品名称：测试商品四件套四件套四件套四件套四件套</Typography>
          </Col>
          <Col span={12}>
            <Typography as="s1">商品名称：测试商品四件套四件套四件套四件套四件套</Typography>
          </Col>
        </Row>
        <div className={Style.goods_search}>
          <GoodsSearch />
        </div>
        <CommonTable className={Style.intelligent_splitting_strategy} columns={goodsColumns} scroll={{ y: `calc(100vh - 250px)` }} ajaxFn={() => Promise.resolve(mock)} />
      </CommonModal>
    </>
  );
}

export default ExchageGoodsModal;
